<template>
  <div style="padding: 10px;font-size: 1.5em; margin-bottom: 50px">
    <el-row>
      <el-col :span="24">
        <div style="width: 1200px; margin: 0 auto; background-color: whitesmoke;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
          <div style="text-align: center; line-height: 50px;">
            AI客服--豆包内核
          </div>
          <div style="height: 350px; overflow:auto; border-top: 1px solid #ccc">

              <div v-for="(message, index) in messages" :key="index" class="message">
                <div class="message-avatar" :class="message.from === 'user'? 'user-avatar' : 'ai-avatar'" :style="{ 'background-image': message.from === 'user'? `url(${avatarUrl})` : `url(${aiAvatarUrl})` }"></div>
                <div :class="message.from === 'user'? 'user-message' : 'ai-message'">
                  {{ message.content }}
                </div>
              </div>

          </div>
          <div style="height: 200px">
            <el-input
              v-model="question"
              placeholder="请输入问题"
              @keyup.enter="sendQuestion"
              style="height: 160px; width: 100%; padding: 20px; border: none; border-top: 1px solid #ccc;
             border-bottom: 1px solid #ccc; outline: none"
              class="input"
            />
            <div style="text-align: right; padding-right: 10px">
              <el-button type="primary" size="mini" @click="sendQuestion">发送</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      question: '',
      avatarUrl: '',
      aiAvatarUrl: 'src/assets/img/ai.jpg',
      messages: [],
      apiKey: "23b5dca9-51d3-42d0-82ae-de7b98024cc2",
      baseURL: 'https://ark.cn-beijing.volces.com/api/v3',
      users: [],
      chatUser: ''
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.avatarUrl = data.user.avatar
          // this.$store.commit('user/setName', data.user.username)  //
        } else {
          this.$message.error('获取用户信息失败')
        }
      }).catch(() => {
        this.$message.error('请求用户信息失败')
      })
    },
    sendQuestion() {
      if (this.question) {
        const userMessage = { from: 'user', content: this.question };
        this.messages.push(userMessage);

        const requestData = {
          messages: [
            { role: 'system', content: '你是人工智能助手' },
            { role: 'user', content: this.question }
          ],
          model: 'ep-20250422153947-pc67f',
        };

        axios.post(`${this.baseURL}/chat/completions`, requestData, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${this.apiKey}`
          }
        })
          .then(response => {
            const aiMessage = { from: 'ai', content: response.data.choices[0].message.content };
            this.messages.push(aiMessage);
            this.question = '';
          })
          .catch(error => {
            console.error('请求出错:', error);
          });
      }
    }
  }
};
</script>

<style scoped>
html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 隐藏超出部分，避免滚动影响固定效果 */
}

.ai-customer-service {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.message-list {
  flex: 1;
  overflow-y: auto; /* 消息列表可滚动 */
  padding: 10px;
}

.input-area {
  display: flex;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #ccc;
  background-color: white; /* 设置背景颜色 */
}

.input {
  flex: 1;
  margin-right: 10px;
}

.message {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.message-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.user-avatar {
  order: 2;
  margin-left: 5px;
}

.ai-avatar {
  margin-right: 10px;
}

.user-message {
  background-color: #e6f7ff;
  border-radius: 5px;
  text-align: left;
  margin-left: auto;
  max-width: 70%;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

.ai-message {
  background-color: #f0f9eb;
  border-radius: 5px;
  text-align: left;
  margin-right: 0;
  max-width: 70%;
  display: inline-block;
  vertical-align: top;
}

.fixed-bottom {
  position: sticky; /* 使用 sticky 定位，在满足条件时固定在底部 */
  bottom: 0; /* 距离底部为 0 */
  left: 0;
  right: 0; /* 左右都为 0，撑满宽度 */
  z-index: 1; /* 设置层级，防止被其他元素覆盖 */
}

.tip {
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
  width:auto;
  display:inline-block !important;
  display:inline;
}
.right {
  background-color: deepskyblue;
}
.left {
  background-color: forestgreen;
}
</style>
